/**
 * 前端主页
 */
var React = require("react");
var {Button,Col,Grid,Row,Clearfix} = require("react-bootstrap");
var {Util,Color,ListPage} = require("flower");
class Index extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            gridList:null
        };

    }

    componentDidMount(){
        //加载卡片
        var data = Util.get("/grid/listRandom");
        this.setState({
            gridList:data
        },function(){
            //this.liClick();//添加点击事件
        });

    }

    randomValue(val1,val2){
        var obj = {};
        var n = (Math.random()*100).toFixed(0) % 2;
        if(n == 0){
            obj.v1 = val1;
            obj.v2 = val2;
        }else{
            obj.v1 = val2;
            obj.v2 = val1;
        }
        return obj;
    }
    openMm(id,v1,v2){
        var key = $("#grid_"+id).find(".grid-bottom a").data("key");
        if(key == 0){//解密
            $("#grid_"+id).find(".grid-body").text(v2);
            $("#grid_"+id).find(".grid-bottom a").text("还原").data("key",1);
        }else{//还原
            $("#grid_"+id).find(".grid-body").text(v1);
            $("#grid_"+id).find(".grid-bottom a").text("解密").data("key",0);
        }
    }

    render(){
        if(this.state.gridList == null){
            return null;
        }
        var loginElement = null;
        if(Util.getLoingUser()!=null && Util.getLoingUser()!=undefined){
            loginElement = <div>
                欢迎您，<img style={{width:"30px",height:"30px",borderRadius:"15px"}} src={Util.getLoingUser().photo}/>{Util.getLoingUser().name}。
                <a href={Util.basePath()+"/main"} style={{marginLeft:"5px"}}>控制台</a>
                </div>
        }else{
            loginElement =<a id="qqLoginBtn" onClick={()=>{
                window.location.href = Util.basePath() + "/qq/login";
            }} style={{marginRight:"10px"}}><img style={{cursor:"pointer"}} src={Util.basePath()+"/image/qq_login.png"}/></a>
        }
        return <Grid>
                <Row className="show-grid" style={{paddingLeft:"15px",paddingRight:"5px",paddingTop:"10px"}}>
                    <div className="pull-left" style={{width:"40%"}}>
                        欢迎来到mango grid卡片集！
                    </div>
                    <div className="pull-right" style={{height:"30px",lineHeight:"30px",width:"60%"}}>
                        <div className="pull-right">
                            {loginElement}
                        </div>
                    </div>
                </Row>
                <Row className="show-grid">
                    {this.state.gridList.map((item,index)=>{
                        var date = Util.formatDate(item.createTime,"yyyy-MM-dd");
                        var obj = this.randomValue(item.key,item.value);
                        return <div key={"grid_"+item.id}>
                            <Col sm={12} md={4} key={"grid_"+item.id}  id={"grid_"+item.id}>
                                <div className="grid-title">{date}[{item.sortName}]</div>
                                <div className="grid-body">
                                    {obj.v1}
                                </div>
                                <div className="grid-bottom">
                                    <a data-key="0" onClick={this.openMm.bind(this,item.id,obj.v1,obj.v2)} style={{marginRight:"5px",cursor:"pointer"}}>解密</a>
                                </div>
                            </Col>
                        </div>

                    })}
                </Row>
            </Grid>

    }
}
module.exports = Index;